<template>
<el-card class="box-card">
      <div class="flex">
        <!-- 搜索 -->
        <div class="w-xs mr">
          <el-input
            v-model="query.name"
            clearable
            placeholder="输入书籍名搜索"
            class="filter-item"
          />
        </div>
        <el-button class="filter-item" type="success" @click="onSearch">
          <el-icon :size="20" class="mr-1">
            <IconIcBaselineSearch />
          </el-icon>搜索
        </el-button>
        <el-button class="filter-item" type="warning" @click="onReset">
          <el-icon :size="18" class="mr-1">
            <IconSystemReset />
          </el-icon>重置
        </el-button>
      </div>
    </el-card>
</template>

<script>
export default {
  props: {
    name: String
    },
    emits: ['update:name'],
setup(props,{emit}) {
    const query = reactive({
        name: props.name
    })


    const onSearch = () => {
        emit('update:name', query.name)
    }

    const onReset = () => {
        query.name = ''
        emit('update:name', query.name)
    }

    return { query, onSearch, onReset }
}
}
</script>